<template>
  <div>
    <a-card :bordered="false" style="margin-bottom: 10px">
      <!-- 条件搜索 -->
      <div class="table-page-search-wrapper">
        <a-form :labelCol="labelCol" :wrapperCol="wrapperCol" ref="queryForm">
          <a-row :gutter="32">
            <a-col :span="4">
              <a-form-item label="线索来源">
                <a-select
                  placeholder="选择线索来源"
                  v-model="queryParam.laiyuan"
                  style="width: 100%"
                  allow-clear
                >
                  <a-select-option
                    v-for="(d, index) in laiyuanOptions"
                    :key="index"
                    :value="d.dictValue"
                    >{{ d.dictLabel }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="推送时间">
                <a-range-picker
                  v-model="dateRange"
                  valueFormat="YYYY-MM-DD"
                  :show-today="true"
                />
              </a-form-item>
            </a-col>

            <a-col>
              <span
                class="table-page-search-submitButtons"
                style="float: right"
              >
                <a-button type="primary" @click="handleQuery"
                  ><a-icon type="search" />查询</a-button
                >
                <a-button style="margin-left: 8px" @click="resetQuery"
                  ><a-icon type="redo" />重置</a-button
                >
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>

    <a-card :bordered="false" style="margin-bottom: 10px">
      <!-- 数据统计横幅 -->
      <div class="data-view">
        <div class="view-item">
          <div class="item-title">
            <span>推送客户数</span>
          </div>
          <div class="item-number">
            <span>381</span>
          </div>
        </div>
        <div class="view-item">
          <div class="item-title">
            <span>新客户数</span>
          </div>
          <div class="item-number">
            <span>376</span>
          </div>
        </div>
        <div class="view-item">
          <div class="item-title">
            <span>重复客户数</span>
          </div>
          <div class="item-number">
            <span>5</span>
          </div>
        </div>
        <div class="view-item">
          <div class="item-title">
            <span>接通数</span>
          </div>
          <div class="item-number">
            <span>225</span>
          </div>
        </div>
        <div class="view-item">
          <div class="item-title">
            <span>意向客户数</span>
          </div>
          <div class="item-number">
            <span>0</span>
          </div>
        </div>
        <div class="view-item">
          <div class="item-title">
            <span>签单客户数</span>
          </div>
          <div class="item-number">
            <span>4</span>
          </div>
        </div>
      </div>
      <!-- tabs切换 -->
      <div style="padding: 10px 20px 0 20px">
        <a-radio-group v-model="tabs">
          <a-radio-button value="1" class="custom-radio-button"
            >数据对比图</a-radio-button
          >
          <a-radio-button value="2" class="custom-radio-button"
            >数据趋势图</a-radio-button
          >
          <a-radio-button value="3" class="custom-radio-button"
            >客户汇总图</a-radio-button
          >
          <a-radio-button value="4" class="custom-radio-button"
            >列表展示</a-radio-button
          >
        </a-radio-group>
      </div>
      <div class="data-view-echarts">
        <!-- 数据对比统计echarts -->
        <div v-show="tabs == 1" style="padding-top: 40px">
          <div class="data-select">
            <a-select ref="select" v-model="dataSelect" style="width: 200px">
              <a-select-option value="1">成功推送TOP10</a-select-option>
              <a-select-option value="2">成功推送TOP20</a-select-option>
              <a-select-option value="3">成功推送TOP50</a-select-option>
              <a-select-option value="4">成功推送TOP100</a-select-option>
            </a-select>
          </div>
          <div class="echarts-item" ref="echartsItem"></div>
        </div>

        <!-- 数据趋势echarts -->
        <div v-show="tabs == 2" style="padding-top: 40px">
          <div class="data-select">
            <a-select ref="select" v-model="dataSelect2" style="width: 200px">
              <a-select-option value="1">成功推送TOP10</a-select-option>
              <a-select-option value="2">成功推送TOP20</a-select-option>
              <a-select-option value="3">成功推送TOP50</a-select-option>
              <a-select-option value="4">成功推送TOP100</a-select-option>
            </a-select>
          </div>
          <div class="echarts-item" ref="echartsItem2"></div>
        </div>

        <!-- 客户汇总图 -->
        <div v-show="tabs == 3" style="display: flex; flex-wrap: wrap">
          <div class="echarts-box">
            <div class="box-title">成功客户类型统计</div>
            <div class="echarts-item-sub" ref="echartsItem3"></div>
          </div>
          <div class="echarts-box">
            <div class="box-title">成功客户重要程度统计</div>
            <div class="box-check">
              客户类型：
              <a-checkbox v-model="person1">个人客户</a-checkbox>
              <a-checkbox v-model="enter1">企业客户</a-checkbox>
            </div>
            <div class="echarts-item-sub" ref="echartsItem4"></div>
          </div>
          <div class="echarts-box">
            <div class="box-title">成功客户池统计</div>
            <div class="box-check">
              客户类型：
              <a-checkbox v-model="person1">个人客户</a-checkbox>
              <a-checkbox v-model="enter1">企业客户</a-checkbox>
            </div>
            <div class="echarts-item-sub" ref="echartsItem5"></div>
          </div>
          <div class="echarts-box">
            <div class="box-title">成功客户状态统计</div>
            <div class="box-check">
              客户类型：
              <a-checkbox v-model="person1">个人客户</a-checkbox>
              <a-checkbox v-model="enter1">企业客户</a-checkbox>
            </div>
            <div class="echarts-item-sub" ref="echartsItem6"></div>
          </div>
        </div>

        <!-- 列表展示table -->
        <div v-show="tabs == 4">
          <!-- 增加 -->
          <biz-cap-bill-add-form
            v-if="showAddModal"
            ref="bizCapBillAddForm"
            :typeOptions="typeOptions"
            :statusOptions="statusOptions"
            @ok="getList"
            @close="showAddModal = false"
          />
          <!-- 编辑 -->
          <biz-cap-bill-edit-form
            v-if="showEditModal"
            ref="bizCapBillEditForm"
            :typeOptions="typeOptions"
            :statusOptions="statusOptions"
            @ok="getList"
            @close="showEditModal = false"
          />
          <advance-table
            title="员工工作统计"
            :pagination="{
              current: queryParam.pageNum,
              pageSize: queryParam.pageSize,
              total: total,
              showSizeChanger: true,
              showLessItems: true,
              showQuickJumper: true,
              showTotal: (total, range) =>
                `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
              onChange: changeSize,
              onShowSizeChange: onShowSizeChange,
            }"
            tableKey="base-statistics-yingxiaotongji-table"
            rowKey="id"
            size="middle"
            @refresh="getList"
            :columns="columns"
            :data-source="bizDataList"
            :loading="loading"
            :format-conditions="true"
            :scroll="{ x: '100%' }"
          >
            <!-- <div class="table-operations" slot="button">
          <a-button type="" @click="handleExport" v-hasPermi="["biz:bizCapBill:export"]">
            <a-icon type="download" />导出
          </a-button>
        </div> -->
            <span slot="type" slot-scope="{ record }">
              {{ typeFormat(record) }}
            </span>

            <!-- <span slot="status" slot-scope="{ record }">
          {{ statusFormat(record) }}
        </span> -->
            <span slot="orgType" slot-scope="{ record }">
              {{ orgTypeFormat(record) }}
            </span>

            <span slot="status" slot-scope="{ record }">
              <a-tag color="orange" v-if="record.status == 0">
                {{ statusFormat(record) }}
              </a-tag>
              <a-tag color="green" v-if="record.status == 1">
                {{ statusFormat(record) }}
              </a-tag>
            </span>
            <span slot="numStr" slot-scope="{ text }">
              ¥ {{ formatNumber(text) }}
            </span>
            <span slot="amount" slot-scope="{ text }">
              ¥ {{ formatNumber(text) }}
              <!-- <span v-if="record.type"> / {{ typeFormat(record) }}</span> -->
            </span>
            <span slot="operation" slot-scope="{ text, record }">
              <a-button
                type="link"
                icon="transaction"
                @click="handleAdd(record)"
                v-if="record.status == 0"
                >结算</a-button
              >
            </span>
            <span slot="rowindex" slot-scope="{ index }">
              {{ index + 1 }}
            </span>
            <span slot="jinjianId" slot-scope="{ text }">
              <a>{{ text }}</a>
            </span>
            <span slot="shangmenCountslv" slot-scope="{ record }">
              {{
                parseFloat(
                  (record.shangmenCounts / record.yaoyueCounts || 0) * 100
                ).toFixed(2)
              }}%
            </span>
            <span slot="chengjiaoCountslv" slot-scope="{ record }">
              {{
                parseFloat(
                  (record.chengjiaoCounts / record.jinxianCounts || 0) * 100
                ).toFixed(2)
              }}%
            </span>
            <span slot="youzhiCountslv" slot-scope="{ record }">
              {{
                parseFloat(
                  (record.youzhiCounts / record.jinxianCounts || 0) * 100
                ).toFixed(2)
              }}%
            </span>
            <span slot="counts" slot-scope="{ text }">
              {{ text || 0 }}
            </span>
            <span slot="fkAmounts" slot-scope="{ text }">
              ¥ {{ parseFloat(text || 0).toFixed(2) }}
            </span>
            <span slot="zhunRuCounts" slot-scope="{ text, record }">
              {{ text || 0 }}/{{
                text == 0 || record.newCustomers == 0
                  ? parseFloat(0).toFixed(2)
                  : parseFloat(
                      ((text || 0) / (record.newCustomers || 0)) * 100
                    ).toFixed(2)
              }}%
            </span>
            <span slot="tohomeCounts" slot-scope="{ text }">
              {{ text || 0 }}
            </span>
          </advance-table>
        </div>
      </div>
    </a-card>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { listBizProductInfo } from "@/api/biz/bizProductInfo";

import AdvanceTable from "@/components/pt/table/AdvanceTable";
import BizCapBillAddForm from "@/views/biz/capbill/modules/BizCapBillAddForm";
import BizCapBillEditForm from "@/views/biz/capbill/modules/BizCapBillEditForm";
import {
  statisticsUserByLaiyuan,
  exportstatisticsUserByLaiyuan,
} from "@/api/system/user";
export default {
  name: "BizCapBill",
  components: {
    AdvanceTable,
    BizCapBillAddForm,
    BizCapBillEditForm,
  },
  data() {
    return {
      laiyuanOptions: [],
      tabs: "1",
      showAddModal: false,
      showEditModal: false,
      // echarts相关
      dataSelect: "1",
      dataSelect2: "1",
      echartsItem: null,
      echartsItem2: null,
      echartsItem3: null,
      person1: true,
      enter1: true,
      echartsItem4: null,
      person2: true,
      enter2: true,
      echartsItem5: null,
      person3: true,
      enter3: true,
      echartsItem6: null,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 选中的主键集合
      selectedRowKeys: [],
      // 选中的数据集合
      selectedRows: [],
      // 高级搜索 展开/关闭
      advanced: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // label的百分比
      labelCol: { span: 6 },
      // 内容区域的百分比
      wrapperCol: { span: 18 },
      // 资方结算表格数据
      bizDataList: [],
      orgTypeOptions: [],
      // 结算类型字典
      typeOptions: [],
      // 结算状态字典
      statusOptions: [],
      dateRange: [],
      // 查询参数
      queryParam: {
        pageNum: 1,
        pageSize: 10,
        userId: undefined,

        deptId: undefined,

        userName: undefined,

        deptName: undefined,

        jinjianId: undefined,

        cusName: undefined,

        beginQdTime: undefined,

        status: undefined,
      },

      columns: [
        // {
        //   title: "序号",
        //   dataIndex: "rowindex",
        //   ellipsis: true,
        //   align: "center",
        //   width: "60px",
        //   scopedSlots: { customRender: "rowindex" },
        // },
        {
          title: "广告公司",
          dataIndex: "newCustomers",
          ellipsis: true,
          align: "right",
          width: "120px",
        },
        {
          title: "推送客户数",
          dataIndex: "name",
          align: "right",
          width: "100px",
        },
        {
          title: "成功推送数",
          dataIndex: "zhunRuCounts",
          ellipsis: true,
          align: "right",
          width: "120px",
          scopedSlots: { customRender: "zhunRuCounts" },
        },
        {
          title: "重复客户失败推送数",
          dataIndex: "tohomeCounts",
          ellipsis: true,
          align: "right",
          width: "150px",
          scopedSlots: { customRender: "tohomeCounts" },
        },
        {
          title: "成功率",
          dataIndex: "cjCounts",
          ellipsis: true,
          align: "right",
          width: "120px",
          scopedSlots: { customRender: "cjCounts" },
        },
        {
          title: "已跟进客户",
          dataIndex: "fkCounts",
          ellipsis: true,
          align: "right",
          width: "120px",
          scopedSlots: { customRender: "fkCounts" },
        },
        {
          title: "跟进客户率",
          dataIndex: "fkAmounts",
          ellipsis: true,
          align: "right",
          width: "120px",
          scopedSlots: { customRender: "fkAmounts" },
        },
        {
          title: "已呼叫接通客户数",
          dataIndex: "fkAmounts2",
          ellipsis: true,
          align: "right",
          width: "120px",
          scopedSlots: { customRender: "fkAmounts2" },
        },
        {
          title: "通话客户率",
          dataIndex: "fkAmounts3",
          ellipsis: true,
          align: "right",
          width: "120px",
          scopedSlots: { customRender: "fkAmounts3" },
        },
        {
          title: "意向客户数",
          dataIndex: "fkAmounts4",
          ellipsis: true,
          align: "right",
          width: "120px",
          scopedSlots: { customRender: "fkAmounts4" },
        },
        {
          title: "意向客户数",
          dataIndex: "fkAmounts5",
          ellipsis: true,
          align: "right",
          width: "120px",
          scopedSlots: { customRender: "fkAmounts5" },
        },
      ],
      // 根据岗位删选员工
      postIds: ["gwzg", "rzgw", "qyjl", "sg"],
      // 部门信息
      deptOptions: [],
      userNamesList: [],
      isKefu: 2,
    };
  },
  created() {
    this.setInfo();
    this.getList();
    this.getDicts("zifang_jiesuan_type").then((response) => {
      this.typeOptions = response.data;
    });
    this.getDicts("zifang_jiesuan_status").then((response) => {
      this.statusOptions = response.data;
    });
    this.getDicts("org_type_options").then((response) => {
      this.orgTypeOptions = response.data;
    });
    this.getDicts("bus_type").then((response) => {
      this.laiyuanOptions = response.data;
    });
  },
  methods: {
    setInfo() {
      setTimeout(() => {
        this.setData();
      }, 1000);
    },
    setData() {
      this.echartsItem = echarts.init(this.$refs.echartsItem);
      // let keyData = this.data.keyData;
      // let valueData = this.data.valueData;
      var option;
      const colors = [
        "#5470C6",
        "#91CC75",
        "#FAC858",
        "#EE6666",
        "#73C0DE",
        "#3BA272",
        "#FC8452",
        "#9A60B4",
      ];
      option = {
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          formatter: function (params) {
            let result = params[0].name + "<br>";
            params.forEach(function (item) {
              if (item.seriesType === "bar") {
                result +=
                  item.marker +
                  " " +
                  item.seriesName +
                  ": " +
                  item.value +
                  "<br>";
              }
            });
            return result;
          },
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "10%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            // dataView: { show: true, readOnly: false },
            // restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: [
            "万耀",
            "百度",
            "尘与微",
            "欧乐1",
            "趣溶借",
            "易用帮",
            "放鑫钱包",
            "千橙",
          ],
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            data: [
              "推送客户数",
              "成功数",
              "失败数",
              "接通数",
              "有效数",
              "签单成功数",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "数量",
            position: "left",
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#333",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "万耀",
            type: "bar",
            barWidth: "10%",
            data: [268, 491, 701, 232, 701, 232],
          },
          {
            name: "百度",
            type: "bar",
            barWidth: "10%",
            data: [12, 10, 20, 26, 20, 26],
          },
          {
            name: "尘与微",
            type: "bar",
            barWidth: "10%",
            data: [10, 20, 30, 10, 30, 10],
          },
          {
            name: "欧乐1",
            type: "bar",
            barWidth: "10%",
            data: [180, 241, 232, 162, 232, 162],
          },
          {
            name: "趣溶借",
            type: "bar",
            barWidth: "10%",
            data: [179, 99, 112, 89, 112, 89],
          },
          {
            name: "易用帮",
            type: "bar",
            barWidth: "10%",
            data: [122, 110, 98, 134, 98, 134],
          },
          {
            name: "放鑫钱包",
            type: "bar",
            barWidth: "10%",
            data: [100, 0, 0, 100, 98, 134],
          },
          {
            name: "千橙",
            type: "bar",
            barWidth: "10%",
            data: [122, 110, 90, 134, 98, 134],
          },
        ],
      };
      this.echartsItem.setOption(option);
    },
    setData2() {
      this.echartsItem2 = echarts.init(this.$refs.echartsItem2);
      // let keyData = this.data.keyData;
      // let valueData = this.data.valueData;
      var option;
      const colors = [
        "#5470C6",
        "#91CC75",
        "#FAC858",
        "#EE6666",
        "#73C0DE",
        "#3BA272",
        "#FC8452",
        "#9A60B4",
      ];
      option = {
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          formatter: function (params) {
            let result = params[0].name + "<br>";
            params.forEach(function (item) {
              if (item.seriesType === "bar") {
                result +=
                  item.marker +
                  " " +
                  item.seriesName +
                  ": " +
                  item.value +
                  "<br>";
              }
            });
            return result;
          },
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "10%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            // dataView: { show: true, readOnly: false },
            // restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: [
            "万耀",
            "百度",
            "尘与微",
            "欧乐1",
            "趣溶借",
            "易用帮",
            "放鑫钱包",
            "千橙",
          ],
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            data: [
              "2025-07-05",
              "2025-07-06",
              "2025-07-07",
              "2025-07-08",
              "2025-07-09",
              "2025-07-10",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "数量",
            position: "left",
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#333",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "万耀",
            type: "line",
            data: [268, 491, 701, 232, 701, 232],
          },
          {
            name: "百度",
            type: "line",
            data: [12, 10, 20, 26, 20, 26],
          },
          {
            name: "尘与微",
            type: "line",
            data: [10, 20, 30, 10, 30, 10],
          },
          {
            name: "欧乐1",
            type: "line",
            data: [180, 241, 232, 162, 232, 162],
          },
          {
            name: "趣溶借",
            type: "line",
            data: [179, 99, 112, 89, 112, 89],
          },
          {
            name: "易用帮",
            type: "line",
            data: [122, 110, 98, 134, 98, 134],
          },
          {
            name: "放鑫钱包",
            type: "line",
            data: [100, 0, 0, 100, 98, 134],
          },
          {
            name: "千橙",
            type: "line",
            data: [122, 110, 90, 134, 98, 134],
          },
        ],
      };
      this.echartsItem2.setOption(option);
    },
    setData3() {
      this.echartsItem3 = echarts.init(this.$refs.echartsItem3);
      // let keyData = this.data.keyData;
      // let valueData = this.data.valueData;
      var option;
      const colors = [
        "#FF7F65",
        "#FFCB81",
        "#7272FF",
        "#4C93FF",
        "#00C7FA",
        "#20D7C5",
      ];
      option = {
        color: colors,
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "0%",
          left: "center",
          orient: "horizontal", // 水平排列图例
        },
        toolbox: {
          feature: {
            // dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "成功客户类型统计",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: true, // 显示标签
              position: "center", // 标签位置在中心
              formatter: "376", // 固定显示 376
              fontSize: 16, // 字体大小
              fontWeight: "bold", // 字体加粗
              color: "#333", // 字体颜色
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 18,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [{ value: 376, name: "个人客户" }],
          },
        ],
      };
      this.echartsItem3.setOption(option);
    },
    setData4() {
      this.echartsItem4 = echarts.init(this.$refs.echartsItem4);
      // let keyData = this.data.keyData;
      // let valueData = this.data.valueData;
      var option;
      const colors = [
        "#FF7F65",
        "#FFCB81",
        "#7272FF",
        "#4C93FF",
        "#00C7FA",
        "#20D7C5",
      ];
      option = {
        color: colors,
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "0%",
          left: "center",
          orient: "horizontal", // 水平排列图例
        },
        toolbox: {
          feature: {
            // dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "成功客户重要程度统计",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: true, // 显示标签
              position: "center", // 标签位置在中心
              formatter: "376", // 固定显示 376
              fontSize: 16, // 字体大小
              fontWeight: "bold", // 字体加粗
              color: "#333", // 字体颜色
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 18,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 10, name: "未设置零星客户" },
              { value: 140, name: "一星" },
              { value: 130, name: "二星" },
              { value: 50, name: "三星" },
              { value: 30, name: "四星" },
              { value: 16, name: "五星" },
            ],
          },
        ],
      };
      this.echartsItem4.setOption(option);
    },
    setData5() {
      this.echartsItem5 = echarts.init(this.$refs.echartsItem5);
      // let keyData = this.data.keyData;
      // let valueData = this.data.valueData;
      var option;
      const colors = [
        "#FF7F65",
        "#FFCB81",
        "#7272FF",
        "#4C93FF",
        "#00C7FA",
        "#20D7C5",
      ];
      option = {
        color: colors,
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "0%",
          left: "center",
          orient: "horizontal", // 水平排列图例
        },
        toolbox: {
          feature: {
            // dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "成功客户池统计",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: true, // 显示标签
              position: "center", // 标签位置在中心
              formatter: "376", // 固定显示 376
              fontSize: 16, // 字体大小
              fontWeight: "bold", // 字体加粗
              color: "#333", // 字体颜色
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 18,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 300, name: "客户池1" },
              { value: 20, name: "客户池2" },
              { value: 40, name: "客户池3" },
              { value: 16, name: "客户池4" },
            ],
          },
        ],
      };
      this.echartsItem5.setOption(option);
    },
    setData6() {
      this.echartsItem6 = echarts.init(this.$refs.echartsItem6);
      // let keyData = this.data.keyData;
      // let valueData = this.data.valueData;
      var option;
      const colors = [
        "#FF7F65",
        "#FFCB81",
        "#7272FF",
        "#4C93FF",
        "#00C7FA",
        "#20D7C5",
      ];
      option = {
        color: colors,
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "0%",
          left: "center",
          orient: "horizontal", // 水平排列图例
        },
        toolbox: {
          feature: {
            // dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "成功客户状态统计",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: true, // 显示标签
              position: "center", // 标签位置在中心
              formatter: "376", // 固定显示 376
              fontSize: 16, // 字体大小
              fontWeight: "bold", // 字体加粗
              color: "#333", // 字体颜色
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 18,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 26, name: "状态1" },
              { value: 140, name: "状态2" },
              { value: 130, name: "状态3" },
              { value: 50, name: "状态4" },
              { value: 30, name: "状态5" },
            ],
          },
        ],
      };
      this.echartsItem6.setOption(option);
    },
    handleGetProductInfo(value) {
      listBizProductInfo({ orgType: value, pageSize: 50 }).then((res) => {
        this.productList = res.data.list;
      });
    },
    formatNumber(num) {
      return parseFloat(num || 0).toFixed(2);
    },
    /** 查询资方结算列表 */
    getList() {
      this.loading = true;
      statisticsUserByLaiyuan(
        this.addDateRange(this.queryParam, this.dateRange)
      ).then((res) => {
        this.bizDataList = res.data.list;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    // 结算类型字典翻译
    typeFormat(row) {
      if (row.type) {
        return this.selectDictLabel(this.typeOptions, row.type);
      } else {
        return "";
      }
    },
    // 结算类型字典翻译
    orgTypeFormat(row) {
      if (row.orgType) {
        return this.selectDictLabel(this.orgTypeOptions, row.orgType);
      } else {
        return "";
      }
    },
    // 结算状态字典翻译
    statusFormat(row) {
      if (row.status) {
        return this.selectDictLabel(this.statusOptions, row.status);
      } else {
        return "";
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParam.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParam = {
        pageNum: 1,
        pageSize: 10,
        userId: undefined,

        deptId: undefined,

        userName: undefined,

        deptName: undefined,

        jinjianId: undefined,

        cusName: undefined,

        beginQdTime: undefined,

        status: undefined,
      };
      this.handleQuery();
    },
    /** 翻页操作 */
    onShowSizeChange(current, pageSize) {
      this.queryParam.pageSize = pageSize;
      this.getList();
    },
    /** 翻页操作 */
    onSizeChange(current, size) {
      this.queryParam.pageNum = 1;
      this.queryParam.pageSize = size;
      this.getList();
    },
    /** 翻页操作 */
    changeSize(current, pageSize) {
      this.queryParam.pageNum = current;
      this.queryParam.pageSize = pageSize;
      this.getList();
    },
    /** 翻页操作 */
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
      this.ids = this.selectedRows.map((item) => item.id);
      this.single = selectedRowKeys.length !== 1;
      this.multiple = !selectedRowKeys.length;
    },
    /** 查询折叠和展开操作 */
    toggleAdvanced() {
      this.advanced = !this.advanced;
    },
    handleAdd(record) {
      if (record.status === "1") {
        this.$message.warning("请勿重复结算", 3);
        return;
      }
      this.showAddModal = true;
      this.$nextTick(() => this.$refs.bizCapBillAddForm.handleAdd(record));
    },
    handleUpdate(record, ids) {
      this.showEditModal = true;
      this.$nextTick(() =>
        this.$refs.bizCapBillEditForm.handleUpdate(record, ids)
      );
    },
    /** 导出按钮操作 */
    handleExport() {
      var that = this;
      this.$confirm({
        title: "是否确认导出?",
        content: "此操作将导出当前条件下所有数据而非选中数据",
        onOk() {
          return exportstatisticsUserByLaiyuan(that.queryParam).then(
            (response) => {
              that.download(response.msg);
              that.$message.success("导出成功", 3);
            }
          );
        },
        onCancel() {},
      });
    },
  },
  watch: {
    tabs(newVal) {
      if (newVal === "2") {
        this.$nextTick(() => {
          if (!this.echartsItem2) {
            this.setData2(); // 延迟初始化
          }
        });
      }
      if (newVal === "3") {
        this.$nextTick(() => {
          if (!this.echartsItem3) {
            this.setData3(); // 延迟初始化
          }
          if (!this.echartsItem4) {
            this.setData4(); // 延迟初始化
          }
          if (!this.echartsItem5) {
            this.setData5(); // 延迟初始化
          }
          if (!this.echartsItem6) {
            this.setData6(); // 延迟初始化
          }
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.data-view {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0;
  width: 60%;
  margin: 20px auto;
  border: 1px solid #93b8e6;
  background-color: #f7fbff;
  border-radius: 5px;
}

.view-item {
  width: 16.61%;
  text-align: center;
  border-right: 1px solid #93b8e6;
}

.view-item:last-child {
  border-right: none;
}

.item-title {
  font-size: 14px;
  color: #636363;
}

.item-number {
  font-size: 18px;
  font-weight: bold;
  margin-top: 5px;
}

.data-view-echarts {
  width: 100%;
  margin-top: 10px;
  min-height: 540px;
}

.data-select {
  position: absolute;
  right: 20px;
  margin-top: -50px;
}

.echarts-item {
  width: 100%;
  height: 400px;
  margin: 0 auto;
}

.echarts-box {
  padding: 20px 15px;
  width: 48%;
  margin: 1%;
  border: 1px solid #e5e8ee;
  border-radius: 5px;
}

.box-title {
  font-size: 16px;
}

.box-check {
  margin-top: 10px;
  position: absolute;
}

.echarts-item-sub {
  width: 100%;
  height: 250px;
}

.custom-radio-button {
  &:hover {
    background-color: #f0f0f0; // 鼠标悬停时的背景色
  }

  &.ant-radio-button-wrapper-checked {
    background-color: #1890ff; // 选中时的背景色
    color: #fff; // 选中时的文字颜色
    border-color: #1890ff; // 选中时的边框颜色
    border-right: 0;
  }
}

.ant-radio-button-wrapper-checked:not(
    .ant-radio-button-wrapper-disabled
  )::before {
  background: none;
}
</style>
